<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>

<!-- meta tags -->
<meta name="keywords" content="">
<meta name="description" content="">

<!-- stylesheets -->
<style>
/* ~~~~~~~~~ layout ~~~~~~~~~~ */

#container {width: 840px;margin: 20px auto;background: #fff;padding: 30px;overflow: hidden;}

/* ~~~~~~~~~ header ~~~~~~~~~~ */

#main-navigation {border-bottom: 5px solid #3942A3;margin: 20px 0;}
#main-navigation ul {overflow: hidden;width: 100%;list-style: none;font-size: 1.6em;}#main-navigation li {float: left;}
#main-navigation li a {background: #3972A3;margin: 0 5px 0 0;padding: 5px 30px;display: block;color: #000000;text-decoration: none;}
#main-navigation li.current a {background: #666;}#main-navigation li a:hover {background: #777;	}
			
/* ~~~~~~~~~ article ~~~~~~~~~~ */

article {width: 100%;overflow: hidden;}
section {float: left;width: 500px;}

/* ~~~~~~~~~ aside ~~~~~~~~~~ */

aside {float: right;width: 310px;}
			
/* ~~~~~~~~~ footer ~~~~~~~~~~ */
			
footer {width: 840px;margin: 20px auto;font-size: 1.4em;text-align: right;}

/* ~~~~~~~~~ common ~~~~~~~~~~ */

body, select, input, textarea {font: 0.625em/1.4 tahoma, verdana, arial, helvetica, sans-serif;color: #333;}
body {background: #ccc;}
h1 {font-weight: normal;color: #666;font: 3.2em/1.4 georgia, 'times new roman', times, serif;margin: 0.2em 0 0;}
h2 {font-weight: normal;color: #666;font: 2.4em/1.4 georgia, 'times new roman', times, serif;margin: 0.2em 0;	}
section p, section ul, section ol,
aside p, aside ul, aside ol {font-size: 1.4em;margin: 1em 0;}
section ul {margin-left: 1em;}
section ol {margin-left: 1.4em;}

/* ~~~~~~~~~ generic ~~~~~~~~~~ */

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;}
img {vertical-align: bottom;}
img, fieldset {border: 0;}
html {overflow-y: scroll;}
header, nav, section, article, figure, aside, footer {
	display: block;	
}

</style>

<!-- javascript -->
<script src="js/jquery-1.3.2.min.js"></script>

<!--conditional comments -->
<!--[if IE]>  
	<script src="js/html5.js"></script>
<![endif]--> 

</head>
<body class="home">
<div id="container">
	<header id="page-header">
    	<div id="logo"><a href="/"><img src="http://1.bp.blogspot.com/-2-BJODrChlc/UG_omGNKrrI/AAAAAAAAC0M/ZFbwLFWMylo/s200/banner.png" alt="HTML5 Standard"></a></div>
        <nav id="main-navigation">
        	<ul>
            	<li class="current"><a href="#">Home</a></li>
                <li style="color: red;"><a href="#">About</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <article id="page-content">
        <section>
            <hgroup>
                <h1>Pemahaman HTML5</h1>
                <h2>Demo HTML5 Template</h2>
            </hgroup>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac iaculis erat. Maecenas id fermentum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sagittis porta mauris, iaculis egestas metus posuere sit amet. Sed ullamcorper orci eu dolor egestas sodales. Donec tempor aliquet pulvinar. Sed sed turpis sapien, ac dictum sem. Phasellus metus leo, gravida in imperdiet sit amet, bibendum id magna. Vivamus ac nunc tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis justo ligula. Suspendisse sodales ultricies consequat. Aenean condimentum eros mi. Duis consectetur placerat vehicula. Fusce vel massa erat.</p>
            <h2>HTML 5 Item</h2>
            <ul>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Lorem ipsum dolor sit amet</li>
            </ul>
            <ol>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Lorem ipsum dolor sit amet</li>
            </ol> 
        </section>
        <aside>	
            <h2>Artikel Terkait</h2>
            <p>Aliquam id lorem ac tellus fringilla bibendum et at turpis. In ut auctor justo. Integer ac quam sed est semper hendrerit. Aenean vulputate interdum augue, sed dapibus mi ultricies convallis. Curabitur a nunc nisi, ac ornare nisi. Ut semper placerat accumsan. Cras eu nibh lorem. Sed sit amet ligula vitae orci molestie sollicitudin sit amet at odio. Mauris non elit ac ipsum facilisis eleifend. Maecenas eu velit sit amet neque iaculis dapibus. Integer mollis est id erat dignissim blandit. Quisque malesuada mattis sollicitudin. Pellentesque volutpat pellentesque luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus augue ut sem convallis ullamcorper. Donec vitae magna nec lacus varius pellentesque vel nec diam. Morbi sagittis, magna sit amet sollicitudin ultricies, neque orci fermentum ipsum, non cursus lectus velit at ante. Donec nec neque in sem suscipit faucibus. Aliquam nisi turpis, volutpat quis suscipit in, varius vitae nunc.</p>
        </aside>
    </article>          
</div>
<footer>
	&copy; Copyright Problogiz 2013	
</footer>
</body>
</html>